<template>
  <div>
    <!-- 表格 -->
    <div class="box">
      <!-- 左边 -->
      <div class="left">
        <p>自编教材（册）</p>
      </div>
      <!-- 右边 -->
      <div class="right">
        <table>
          <!-- 头部 -->
          <thead>
            <th>教材名称</th>
            <th>初</th>
            <th>中</th>
            <th>高</th>
            <th>进行中</th>
            <th>完成</th>
            <th>出版</th>
            <th>出版机构</th>
            <th></th>
          </thead>
          <!-- 内容 -->
          <tbody>
            <tr v-for="(item,index) in three" :key="index">
              <td><input type="text" v-model="item.value"></td>
              <td v-for="e in one" :key="e.id"><input type="radio" v-model="item.one" :value="e.value"></td>
              <td v-for="s in tow" :key="s.value"><input type="radio" v-model="item.tow" :value="s.value" @click="pub(index,s.value)"></td>
              <td>{{item.four}}</td>
              <td><a @click="shanchu(index)" v-if="index !== 0">删除</a></td>
            </tr>
          </tbody>
          <!-- 底部 -->
          <tfoot>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
              <a-button @click="add" type="primary">
                增加
              </a-button>
            </td>
          </tfoot>
        </table>
      </div>
    </div>
    <!-- 存储数据 -->
    <div>
      <a-button @click="sub" type="primary">
        提交
      </a-button>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      one: [
        { id: 1, value: 101 },
        { id: 2, value: 201 },
        { id: 3, value: 301 }
      ],
      tow: [
        { value: 10 },
        { value: 20 },
        { value: 30 }
      ],
      three: [
        {
          one: '',
          tow: '',
          value: '',
          four: ''
        }]
    }
  },
  methods: {
    // 增加
    add () {
      this.three = [...this.three, {
        one: '',
        tow: '',
        value: '',
        four: ''
      }]
    },
    // 删除
    shanchu (index) {
      this.three.splice(index, 1)
    },
    // 出版
    pub (i, e) {
      if (e === 30) {
        this.three[i].four = '清华出版社'
      } else {
        this.three[i].four = ''
      }
    },
    // t提交
    sub () {
      localStorage.setItem('aa', JSON.stringify(this.three))
    }

  }
}
</script>

<style lang="less" scoped>
.box {
  width: 60%;
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: auto;
  .left {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;
    width: 30%;
    font-size: 20px;
    font-weight: 900;
  }
  .right {
    width: 70%;
    display: flex;
    flex-direction: column;
    border: 1px solid #000;
    table {
      border-collapse: collapse;
      th {
        border: 1px solid #000;
      }
      tbody {
        td {
          border: 1px solid #000;
        }
      }
    }
  }
}
.ant-btn-primary {
  margin-top: 10px;
}
</style>
